<template>
    <view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
        <view class="fixed left-0 right-0 top-0 z-10085">
            <view class="bg-[#fff] px-[30rpx] h-[88rpx] flex-center relative z-10084">
                <view class="search-input">
                    <view class="flex-1 text-[32rpx] leading-[60rpx] text-[var(--text-color-light9)]"
                        :class="{ '!text-[#333]': from_type }" @click="typePopup = true">{{ from_type_name || '请选择卡项状态'
                        }}
                    </view>
                    <text class="nc-iconfont nc-icon-shangV6xx-1  ml-[18rpx] !text-[var(--text-color-light6)]"
                        v-if="typePopup" @click="typePopup = false"></text>
                    <text class="nc-iconfont nc-icon-xiaV6xx  ml-[18rpx] !text-[var(--text-color-light6)]" v-else
                        @click="typePopup = true"></text>

                </view>

            </view>
            <view class="type-class">
                <u-popup :show="typePopup" mode="top" @close="typePopup = false">
                    <view @touchmove.prevent.stop class="py-[22rpx]">
                        <view class="leading-[80rpx] text-[26rpx] text-[#333] px-[50rpx]"
                            :class="{ 'bg-[#FDF8F8] !text-primary font-500': from_type == '' }" @click="searchTypeFn()">
                            全部</view>
                        <view class="leading-[80rpx] text-[26rpx] text-[#333] px-[50rpx]"
                            v-for="(item, index) in pointType" @click="searchTypeFn(index, item)"
                            :class="{ 'bg-[#FDF8F8] !text-primary font-500': from_type == index + '' }">{{ item.label }}
                        </view>
                    </view>
                </u-popup>
            </view>
            <view class="pt-[30rpx] bg-[var(--page-bg-color)] tab-style-1">
                <view class="tab-left">
                    <view class="tab-left-item" :class="{ 'class-select': amount_type === item.status }"
                        @click="loadTypeFn(item.status)" v-for="(item, index) in typeList">{{ item.name }}
                    </view>
                </view>
                <!-- <view class="tab-right" @click="handleSelect">
                    <view class="tab-right-date">日期</view>
                    <view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
                </view> -->
            </view>

        </view>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getPayWalletPageCartFn"
            top="202rpx">
            <view v-for="(info, index) in list" :key="index"
                class="sidebar-margin card-template  mb-[var(--top-m)] bg-[var(--primary-color)] p-[20rpx] rounded-[var(--rounded-big)]"
                :class="{ 'bg-[#666]': amount_type == '102' }">
                <view class="flex w-full justify-between items-center text-[#fff]  py-[4rpx]">
                    <view class="flex items-center">ID:{{ info.id }}
                    </view>
                    <view class="flex">
                        <view v-if="statusTypeFormat(info?.status)"
                            class="box-border border-[1rpx] flex  p-[4rpx] text-[24rpx]  border-solid border-[#fff] border-[var(--border-radius)] rounded-[8rpx]">
                            {{ statusTypeFormat(info?.status) }}</view>
                        <view
                            class="box-border border-[1rpx] ml-[10rpx] flex p-[4rpx] text-[24rpx]  border-solid border-[#fff] border-[var(--border-radius)] rounded-[8rpx]">
                            {{ skuTypeFormat(info?.skuType) }}</view>
                    </view>

                </view>
                <view class="flex items-center justify-between w-full mt-[30rpx]">
                    <view
                        class="text-[36rpx]  text-[#fff] w-full text-[#fff] leading-[36rpx] overflow-hidden max-w-[490rpx] truncate  ">
                        {{
                            info.spuName
                        }}
                    </view>
                    <view class="text-[36rpx]  text-[#fff]  text-[#fff] leading-[36rpx] overflow-hidden truncate  ">
                        x{{
                            info.count
                        }}
                    </view>
                </view>
                <view class="flex items-center justify-between w-full mt-[30rpx]">
                    <view class="text-[36rpx]  text-[#fff] w-full text-[#fff] leading-[36rpx] overflow-hidden   ">
                        <text>
                            {{ info.leftStatus }}
                        </text>
                        <text class="text-[28rpx] ml-[20rpx]">
                            ({{ info.enableStatus }})
                        </text>
                    </view>
                </view>
                <view class="flex items-center justify-between w-full mt-[30rpx] mb-[10rpx]">
                    <view class="text-[28rpx]  text-[#fff] w-full text-[#fff] leading-[36rpx] overflow-hidden   ">
                        <text>
                            来源:{{ info.no }}
                        </text>
                        <text class="text-[28rpx] ml-[20rpx]">
                            购买时间:{{ timeFormat(info.createTime) }}
                        </text>
                    </view>
                </view>

            </view>
            <mescroll-empty :option="{ tip: '暂无剩余卡项' }" v-if="!list.length && loading"></mescroll-empty>
        </mescroll-body>
        <!-- 时间选择 -->
        <select-date ref="selectDateRef" @confirm="confirmFn" />
    </view>
    <!-- 水印 -->
    <watermark></watermark>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { t } from '@/locale'
import { redirect, img } from '@/utils/common';
import { getSystemDictList } from '@/app/api/system'

import { getPayWalletPageCart } from '@/addon/shopMemberInfo/api/shopMember';

import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import selectDate from '@/components/select-date/select-date.vue';
import { timeFormat } from '@/utils/formatting';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const from_type = ref('');
const from_type_name = ref('')
const amount_type = ref('');
const create_time = ref([])
const list = ref<Array<any>>([]);
const mescrollRef = ref(null);
const loading = ref<boolean>(false);
const typeList = ref([
    { name: '全部', status: '' },
    { name: '计次卡', status: 20 },
    { name: '计时卡', status: 21 },
    { name: '计时计次', status: 22 },
    { name: '过期卡项', status: 102 },

])
const statusTypeFormat = (status: any) => {
    if (status == 0) {
        return '未激活'
    }
    if (status == -1) {
        return '有欠款'
    }
    if (status == 2) {
        return '已停卡'
    }
    if (status == 3) {
        return '已用尽'
    }
    if (status == 4 || status > 9) {
        return '已过期'
    }
    if (status == 5) {
        return '已退款'
    }
    if (status == 6 || status == 9) {
        return '换购'
    }
    if (status == 8) {
        return '转让'
    }
    if (status == 20) {
        return '退款中'
    }
}
const skuTypeFormat = (type: any) => {
    if (type == 20) {
        return '计次'
    }
    if (type == 21) {
        return '计时'
    }
    if (type == 22) {
        return '计时计次'
    }

}
const getPayWalletPageCartFn = (mescroll: any) => {
    let data = {
        pageNo: mescroll.num,
        pageSize: mescroll.size,
        status: from_type.value,
        skuType: amount_type.value == '' ? undefined : amount_type.value,
        // createTime: create_time.value
    };
    loading.value = false;
    getPayWalletPageCart(data).then((res: any) => {
        let newArr = res.data.list;
        mescroll.endSuccess(newArr.length);
        //设置列表数据
        if (mescroll.num == 1) {
            list.value = []; //如果是第一页需手动制空列表
        }
        list.value = list.value.concat(newArr);
        list.value = list.value.map(item => {
            item.flag = true
            return item
        })
        loading.value = true;
    }).catch(() => {
        loading.value = true;
        mescroll.endErr(); // 请求失败, 结束加载
    })
}

const pointType = ref([])
const getSystemDictListFn = () => {
    getSystemDictList({
        dictType: 'meton_card_status',
        size: 1000
    }).then((res: any) => {
        pointType.value = res.data.list
        console.log(pointType.value)
    })
}
getSystemDictListFn()
// 关键词搜索条件搜索
const typePopup = ref(false)
const searchTypeFn = (index: string = '', item: any = {}) => {
    from_type.value = index
    from_type_name.value = item.label
    typePopup.value = false
    list.value = [];
    getMescroll().resetUpScroll();
}
// 类型搜索
const loadTypeFn = (type: string) => {
    amount_type.value = type;
    list.value = [];
    getMescroll().resetUpScroll();
}

//日期筛选
const selectDateRef = ref()
const handleSelect = () => {
    selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
    create_time.value = data;
    list.value = []
    getMescroll().resetUpScroll();
}
</script>

<style lang="scss" scoped>
:deep(.type-class .u-popup .u-transition) {
    top: 86rpx !important;
}
</style>
